<template>
  <el-main>
    <el-image :src="require('@/assets/img/book-input/cuotiben.png')" class="cuotiben" @click="drawer = true"></el-image>
    <el-row>
      <!--      左半部分布局-->
      <el-col :span="8">
        <el-image :src="require('@/assets/img/booktest.png')" style="height: 400px"></el-image>
        <br>
        <span class="ft">物理·必修二·学探诊</span>
      </el-col>

      <!--      右半部分布局-->
      <el-col :span="16">
        <el-table :data="tableData" style="width: 100%" max-height="330" v-model="tableData">
          <el-table-column fixed prop="pageNum" label="页码" width="190">
            <template #default="scope">
              <div>
                <el-input v-model="scope.row.pageNum"></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="questionNum" label="题号" width="190">
            <template #default="scope">
              <div>
                <el-input v-model="scope.row.questionNum"></el-input>
              </div>
            </template>
          </el-table-column>

          <el-table-column  label=" " width="190" align="center">
            <template #default="scope">
              <el-button
                  type="primary"
                  size="large"
                  @click.prevent="addRow(scope.$index)"
              >
                添加
              </el-button>
            </template>
          </el-table-column>


        </el-table>

        <el-row>
          <el-col :span="12">
            <el-button type="primary" class="btn" @click="gotoBookInput">
              返回书目
            </el-button>
          </el-col>
          <el-col :span="12">
            <el-button type="danger" class="btn" @click="gotoSuccess">
              确认提交
            </el-button>
          </el-col>

        </el-row>

      </el-col>

    </el-row>
  </el-main>

  <el-drawer
      v-model="drawer"
      :size="'90%'"
      :direction="rtl"
      :before-close="handleClose"
  >
    <el-row>
      <el-col :span="12">{{ dateTime }}</el-col>
      <el-col :span="8" class="h2"><h2>错题本</h2></el-col>
      <el-col :span="4">
        <el-button type="primary" size="large" class="btn" @click="fanhui">返回录入</el-button>
      </el-col>

    </el-row>
    <el-table :data="tableData" style="width: 100%" max-height="320" v-model="tableData">
      <el-table-column fixed prop="order" label="序号" width="150"/>
      <el-table-column prop="bookName" label="书目" width="150"/>
      <el-table-column prop="pageNum" label="页码" width="150">
        <template #default="scope">
          <div>
            <el-input v-model="scope.row.pageNum"></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="questionNum" label="题号" width="150">
        <template #default="scope">
          <div>
            <el-input v-model="scope.row.questionNum"></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100" align="center">
        <template #default="scope">
          <el-button
              type="danger"
              size="middle"
              @click.prevent="deleteRow(scope.$index)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-drawer>
</template>

<script>
import {defineComponent, onMounted, ref} from 'vue'
import {ElMessage} from 'element-plus'
import {useRouter} from "vue-router";


export default defineComponent({
  name: "paper-detail",
  setup() {

    const router = useRouter();


    const dataObj = {
      order: '第1题', //序号
      bookName: '数学·必修二·学探诊', //书目,
      'pageNum': '',
      'questionNum': ''
    };
    const tableData = ref([]);

    const drawer = ref(false); //模态框变量

    /**
     * 删除操作的函数
     */
    const deleteRow = (index) => {
      tableData.value.splice(index, 1);
    }

    const dateTime = ref(); //本页面需要显示的时间

    const gotoSuccess = () => {
      router.push({
        path:"/success",
        name:"Success",
        params:{
          "dizhi":"Paper"
        }
      });
    }

    const gotoBookInput = () =>{
      router.push('/book-input');
    }

    const tableData1 = ref([
      {
        order: '第1题', //序号
        bookName: '数学·必修二·学探诊', //书目
        pageNum: 'P1', //页码
        questionNum: 'Q5', //题号
      }, {
        order: '第1题', //序号
        bookName: '数学·必修二·学探诊', //书目
        pageNum: 'P12', //页码
        questionNum: 'Q51', //题号
      }, {
        order: '第1题', //序号
        bookName: '数学·必修二·学探诊', //书目
        pageNum: 'P1', //页码
        questionNum: 'Q5', //题号
      }, {
        order: '第1题', //序号
        bookName: '数学·必修二·学探诊', //书目
        pageNum: 'P1', //页码
        questionNum: 'Q5', //题号
      }, {
        order: '第1题', //序号
        bookName: '数学·必修二·学探诊', //书目
        pageNum: 'P1', //页码
        questionNum: 'Q5', //题号
      }, {
        order: '第1题', //序号
        bookName: '数学·必修二·学探诊', //书目
        pageNum: 'P1', //页码
        questionNum: 'Q5', //题号
      }, {
        order: '第1题', //序号
        bookName: '数学·必修二·学探诊', //书目
        pageNum: 'P1', //页码
        questionNum: 'Q5', //题号
      }, {
        order: '第1题', //序号
        bookName: '数学·必修二·学探诊', //书目
        pageNum: 'P1', //页码
        questionNum: 'Q5', //题号
      }, {
        order: '第1题', //序号
        bookName: '数学·必修二·学探诊', //书目
        pageNum: 'P1', //页码
        questionNum: 'Q5', //题号
      }, {
        order: '第1题', //序号
        bookName: '数学·必修二·学探诊', //书目
        pageNum: 'P1', //页码
        questionNum: 'Q5', //题号
      }, {
        order: '第1题', //序号
        bookName: '数学·必修二·学探诊', //书目
        pageNum: 'P1', //页码
        questionNum: 'Q5', //题号
      }, {
        order: '第1题', //序号
        bookName: '数学·必修二·学探诊', //书目
        pageNum: 'P1', //页码
        questionNum: 'Q5', //题号
      },
    ]) //TODO: 这里要实现与前面的tableData一致

    /**
     * 新增函数
     */
    const addRow = () => {
      tableData.value.push({
        order: '第1题', //序号
        bookName: '数学·必修二·学探诊', //书目,
        'pageNum': '',
        'questionNum': ''
      });
    }

    const handleClose = (done) => {
      if(tableData.value.length===0){
        tableData.value.push(dataObj);
      }
      done();
    }

    const fanhui = () => {
      if(tableData.value.length===0){
        tableData.value.push(dataObj);
      }
      drawer.value = false;
    }

    

    onMounted(() => {
      let d = new Date();
      dateTime.value = d.getFullYear() + "年" + (d.getMonth() + 1) + "月" + d.getDate() + "日"; //获取时间 格式化成yyyy年MM月DD日
      tableData.value.push(dataObj);
    })

    return {
      tableData,
      addRow,
      drawer,
      dateTime,
      deleteRow,
      handleClose,
      fanhui,
      gotoSuccess,
      gotoBookInput,
    }
  }
});
</script>

<style scoped>
.el-main {
  background: #FFFFFF;
  width: 1024px;
  border-top: 1px #3bcdaf solid;
}

.ft {
  margin-left: 23px !important;
  font-size: 20px;
}

.btn {
  margin-top: 50px !important;
  height: 56px !important;
  width: 122px;
  margin-left: 50px;
}

.cuotiben {
  margin-left: 917px!important;
  height: 50px!important;
}
</style>